<template>

    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      :collapse="collapsed"
     
      text-color="white"
    >
     
      <el-menu-item index="1">
        <el-icon><icon-menu /></el-icon>
        <template #title>
           <RouterLink to="/home/dept">部门管理</RouterLink>
        </template>
      </el-menu-item>
      <el-menu-item index="2">
        <el-icon><icon-menu /></el-icon>
        <template #title>
            <RouterLink to="/home/user">用户管理</RouterLink>
        </template>
      </el-menu-item>
      <el-menu-item index="3">
        <el-icon><icon-menu /></el-icon>
        <template #title>
            <RouterLink to="/home/system">权限管理</RouterLink>
        </template>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon><icon-menu /></el-icon>
        <template #title>
            <RouterLink to="/home/access">通道管理</RouterLink>
        </template>
      </el-menu-item>
      <el-menu-item index="5">
        <el-icon><icon-menu /></el-icon>
        <template #title>
            <RouterLink to="/home/xigua">西瓜管理</RouterLink>
        </template>
      </el-menu-item>
    </el-menu>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
  } from '@element-plus/icons-vue'
  
  const props=  defineProps({
       collapsed:{
        type:Boolean
       }
  })


//   const handleOpen = (key: string, keyPath: string[]) => {
//     console.log(key, keyPath)
//   }
//   const handleClose = (key: string, keyPath: string[]) => {
//     console.log(key, keyPath)
//   }
  </script>
  
  <style lang="less" scoped>
a{
    color: white !important;
    text-decoration: none;
    width: 100%;
}

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  .el-menu-vertical-demo{
      background-color: @menuBg;
  }
  </style>
  